<template>
  <div class="content">
    <el-descriptions title="订单详情"> </el-descriptions>

    <el-form>
      <!-- 订单号 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="订单号">{{
        data.orderNo
      }}</el-form-item>
      <el-form-item v-else label="订单号:">
        <el-input placeholder="请输入订单号" v-model="data.orderNo"></el-input>
      </el-form-item>

      <!-- 下单时间 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="下单时间:">{{
        data.orderTime
      }}</el-form-item>
      <el-form-item v-else label="下单时间:">
        <el-input
          placeholder="请输入下单时间"
          v-model="data.orderTime"
        ></el-input>
      </el-form-item>
      <!-- 手机号 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="手机号:">{{
        data.phone
      }}</el-form-item>
      <el-form-item v-else label="手机号:">
        <el-input placeholder="请输入手机号" v-model="data.phone"></el-input>
      </el-form-item>
      <!-- 收货人 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="收货人:">{{
        data.consignee
      }}</el-form-item>
      <el-form-item v-else label="收货人:">
        <el-input
          placeholder="请输入收货人"
          v-model="data.consignee"
        ></el-input>
      </el-form-item>
      <!-- 配送地址 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="配送地址:">
        {{ data.deliverAddress }}
      </el-form-item>
      <el-form-item v-else label="配送地址:">
        <el-input
          placeholder="请输入配送地址"
          v-model="data.deliverAddress"
        ></el-input>
      </el-form-item>
      <!-- 送达时间 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="送达时间:">
        {{ data.deliveryTime }}
      </el-form-item>
      <el-form-item v-else label="送达时间:">
        <el-input
          placeholder="请输入送达时间"
          v-model="data.deliveryTime"
        ></el-input>
      </el-form-item>
      <!-- 用户备注 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="用户备注:">{{
        data.remarks
      }}</el-form-item>
      <el-form-item v-else label="用户备注:">
        <el-input
          placeholder="请输入用户备注"
          v-model="data.remarks"
        ></el-input>
      </el-form-item>

      <!-- 订单金额 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="订单金额:">
        {{ data.orderAmount }}
      </el-form-item>

      <el-form-item v-else label="订单金额:">
        <el-input
          placeholder="请输入订单金额"
          v-model="data.orderAmount"
        ></el-input>
      </el-form-item>

      <!-- 订单状态 -->
      <el-form-item v-if="edit == 'show' ? true : false" label="订单状态:">
        {{ data.orderState }}
      </el-form-item>

      <el-form-item v-else label="订单状态">
        <el-select v-model="data.orderState" placeholder="订单状态">
          <el-option label="已完成" value="已完成"></el-option>
          <el-option label="已受理" value="已受理"></el-option>
          <el-option label="派送中" value="派送中"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-show="edit == edit ? true : false">
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      edit: "",
      data: {
        id: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        orderAmount: "",
        orderNo: "",
        orderState: "",
        orderTime: "",
        phone: "",
        remarks: "",
      },
      input: "",
    };
  },
  created() {
    this.edit = this.$route.query.form;
    // console.log(this.edit);
    this.data = this.$route.query;
  },
  methods: {
    submitForm(formName) {

    },
    resetForm(formName) {
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  background-color: #fff;
  padding: 20px 20px;
  p {
    line-height: 30px;
    font-size: 14px;
  }
  .el-input {
    width: 200px;
  }
}
</style>
